<template>
  <div class="Sku">
    <div class="sku">
      <div @click="show = true">
        <span>标准</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-action-sheet v-model="show" title=" ">
      <div class="content">
        <div
          class="top"
          v-for="(item, index) in productList"
          :key="'idx-' + index"
        >
          <img :src="item.url" alt @click="clickImg" />
          <div class="text">
            <span>￥{{ item.price }}</span>
            <span
              >剩余<span class="num">{{ item.number }}</span
              >件</span
            >
            <span>请选择规格</span>
          </div>
        </div>
        <div
          class="middle"
          v-for="(item, index) in specificationList"
          :key="'idx1-' + index"
          @click="isActive(index)"
        >
          <span>{{ item.name }}</span>
          <div class="value" :class="{ active: activeClass == index }">
            <img :src="info.picUrl" alt />
            <span>{{ item.valueList[0].value }}</span>
          </div>
        </div>
        <div class="bottom">
          <span>购买数量</span>
          <van-stepper v-model="value" @change="onChange" :max="max"/>
        </div>
        <van-goods-action>
          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="onAddCart"
          />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import {
  Icon,
  Sku,
  ActionSheet,
  Stepper,
  GoodsActionButton,
  GoodsAction,
  ImagePreview,
  Toast,
} from "vant";
import API from "@/utils/api.js";
export default {
  name: "Sku",
  props: ["specificationList", "info", "productList"],
  data() {
    return {
      show: false,
      value: 1,
      max: 2,
      activeClass: -1, // 0为默认选择，-1为不选择
    };
  },
  components: {
    [Sku.name]: Sku,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet,
    [Stepper.name]: Stepper,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsAction.name]: GoodsAction,
    [ImagePreview.name]: ImagePreview,
    [Toast.name]: Toast,
  },
  methods: {
    clickImg() {
      ImagePreview([this.info.picUrl]);
    },
    isActive(index) {
      this.activeClass = index;
    },
    onAddCart() {
      this.$post(API.POST_CART_ADD, {
        token: this.$store.state.token,
        goodsId: this.productList[0].goodsId,
        number: this.value,
        productId: this.productList[0].id,
      }).then((res) => {
        Toast.success("加入购物车成功");
        this.show = false;
      });
    },
    onChange(name) {
      if (this.productList[0].number != 0) {
        this.max = this.productList[0].number;
      }else if (this.productList[0].number == 0) {
        this.max = this.productList[0].number;
        Toast("库存不足");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sku {
  width: 95%;
  height: 40px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  div {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
.content {
  padding: 16px 16px 100px;
  .top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    img {
      width: 100px;
      height: 100px;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      :nth-child(1) {
        font-size: 20px;
        color: red;
      }
      span {
        margin: 2px;
        color: #888;
      }
      .num {
        font-size: 12px;
        color: #444;
      }
    }
  }
  .middle {
    display: flex;
    flex-direction: column;
    margin: 24px 0;
    .value {
      width: 70px;
      height: 36px;
      border-radius: 6px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        font-size: 8px;
      }
    }
  }
  .active {
    background-color: #fde9eb;
    color: rgb(252, 128, 115);
    border: 1px solid rgb(252, 128, 115);
  }
  .bottom {
    display: flex;
    justify-content: space-between;
  }
}
</style>